<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <style>
        body {
            margin: 0px;
            padding: 0px;
        }

        #myCanvas {
            border: 1px solid #9C9898;
        }
    </style>
    <script src="js/Animation.js" type="text/javascript"></script>
    <script>
    var canvas;
    var canvas2;
    var context;
    var context2;
    var imageObj;
    var animation;
    var animation2;

    window.onload = function () {

        canvas = document.getElementById('myCanvas');
        context = canvas.getContext('2d');
        canvas2 = document.getElementById('myCanvas2');
        context2 = canvas2.getContext('2d');

        poses = [];
        num = 50;
        for (var i = 0; i < num; ++i) {
            p = {};
            p.x = Math.random() * 700 + 40;
            p.y = i / num * 400 + 110;
            p.time = Math.random();
            poses.push(p);
        }

        function onReady() {
            var fps = 120;

            var fpsCount = 0;
            var fpsTime = 0;

            animation = collection.get("peasshooter");
            animation.SetFPS(fps);
            animation2 = collection.get("little_train");
            animation2.SetFPS(fps);

            var lastLoop = false;

            update = function () {

                if (lastLoop) return;
                lastLoop = true;

                if ((new Date().getTime() - fpsTime) > 1000) {
                    console.log(fpsCount);
                    fpsCount = 0;
                    fpsTime = new Date().getTime();
                } else {
                    fpsCount++;
                }


                // first method to play animation
                context2.clearRect(0, 0, canvas2.width, canvas2.height);
                animation2.DrawAtPoint(context2, 158, 110 - 30);
                animation2.Update();

                // second method to play animation - need if animation has a lot of copies
                context.clearRect(0, 0, canvas.width, canvas.height);

                for (var i = 0; i < poses.length; ++i) {
                    poses[i].time += 1 / fps / animation.Time();
                    while (poses[i].time > 1) {
                        poses[i].time -= 1;
                    }
                    animation.SetPos(poses[i].x, poses[i].y);
                    animation.Draw(context, poses[i].time);
                }

                context.font = "20px sens serif";
                context.fillText(num + " animations", 10, 20);

                lastLoop = false;
            };

            var timer = setInterval(update, 1 / fps * 1000);
        };

        collection = new AnimationsCollection("export", onReady);
        collection.load();

    };
    </script>
</head>
<body>
<center>Demo of animations created with <br><a href="http://2dgameanimation.wordpress.com/">2D Game Animation Editor</a><br>
    <canvas id="myCanvas2" width="360" height="200">
    </canvas>
    <br>
    <canvas id="myCanvas" width="800" height="550">
    </canvas>
</body>
</html> 